<template>
  <div class="container">
    <!-- <Inform> </Inform> -->
    <div
      class="house"
      v-for="(item, index) in list"
      :key="index"
      @click="$router.push(`/housedetails/${item.houseCode}`)"
    >
      <div class="imgSrc">
        <img
          :src="'http://www.xiaoshuaipeng.com:8080' + item.houseImg"
          alt=""
        />
      </div>
      <div class="content">
        <h3>{{ item.title }}</h3>
        <p>{{ item.desc }}</p>
        <p>
          <span v-for="(ele, i) in item.tags" :key="i">{{ ele }}</span>
        </p>
        <p>{{ item.price }} <span>元/月</span></p>
      </div>
    </div>
  </div>
</template>

<script>
// import Inform from "@/components/Inform.vue";
import axios from "axios";
export default {
  // components: {
  //   Inform,
  // },
  name: "HouseIndex",
  data() {
    return {
      list: [],
    };
  },
  async created() {
    const res = await axios.get(
      "http://www.xiaoshuaipeng.com:8080/houses?cityId=AREA%7C88cff55c-aaa4-e2e0"
    );
    console.log(res.data.body.list);
    this.list = res.data.body.list;
  },
  methods: {},
};
</script>

<style scoped lang="less">
.house {
  padding: 10px;
  display: flex;
  border: 0.4px solid #e7e7e7;
  background-color: #fff;
  .imgSrc {
    img {
      width: 80px;
      height: 80px;
    }
  }

  .content {
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    h3 {
      font-size: 15px;
      white-space: nowrap; /* 禁止换行 */
      overflow: hidden; /* 隐藏超出容器的内容 */
      text-overflow: ellipsis; /* 显示省略号 */
      max-width: 200px; /* 设置元素最大宽度 */
    }
    p:nth-child(2) {
      font-size: 12px;
      color: #a9a8a8ea;
    }
    p:nth-child(3) {
      span {
        padding: 3px;
        font-size: 13px;
        background-color: #0fd8f7e8;
      }
    }
    p:nth-child(4) {
      color: red;
    }
  }
}
</style>
